<template>
  <div class="info-box security-box">
    <h3 class="title">证券信息:<el-divider></el-divider></h3>
    <el-form label-width="110px" size="small">
      <el-row class="form-row">
        <el-col :span="6">
          <el-form-item label="证券名称:"><el-input :value="stockInfo.stockNameSt" disabled size="mini"></el-input></el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="证券类别:"><el-input :value="stockInfo.stockType" disabled size="mini"></el-input></el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="起息日:"><el-input :value="stockInfo.interestStartDate" disabled size="mini"></el-input></el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="止息日:"><el-input :value="stockInfo.interestEndDate" disabled size="mini"></el-input></el-form-item>
        </el-col>
      </el-row>
      <el-row class="form-row">
        <el-col :span="6">
          <el-form-item label="证券期限:">
            <el-input :value="stockInfo.day" disabled size="mini">
              <template slot="append">天</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="剩余期限:"
            ><el-input :value="stockInfo.remainderDay" disabled size="mini">
              <template slot="append">天</template>
            </el-input></el-form-item
          >
        </el-col>
        <el-col :span="6">
          <el-form-item label="面值:"
            ><el-input :value="stockInfo.facePrice" disabled size="mini">
              <template slot="append">元</template>
            </el-input></el-form-item
          >
        </el-col>
        <el-col :span="6">
          <el-form-item label="票面利率:"
            ><el-input :value="stockInfo.yearRate" disabled size="mini">
              <template slot="append">%</template>
            </el-input></el-form-item
          >
        </el-col>
      </el-row>
      <el-row class="form-row">
        <el-col :span="6">
          <el-form-item label="利率类型:"><el-input :value="stockInfo.interestType" disabled size="mini"></el-input></el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="发行人:"><el-input :value="stockInfo.issueName" disabled size="mini"></el-input></el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="证券外评:"><el-input :value="stockInfo.stockOutSideGradeInfo" disabled size="mini"></el-input></el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="发行人外评:"><el-input :value="stockInfo.issueOutSideGradeInfo" disabled size="mini"></el-input></el-form-item>
        </el-col>
      </el-row>
      <el-row class="form-row">
        <el-col :span="6">
          <el-form-item label="总市值:">
            <el-input :value="stockInfo.totalValue" disabled size="mini">
              <template slot="append">元</template>
            </el-input></el-form-item
          >
        </el-col>
        <el-col :span="6">
          <el-form-item label="流通市值:"
            ><el-input :value="stockInfo.turnoverValue" disabled size="mini">
              <template slot="append">元</template>
            </el-input></el-form-item
          >
        </el-col>
        <el-col :span="6">
          <el-form-item label="发行日:"><el-input :value="stockInfo.issueDate" disabled size="mini"></el-input></el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="上市日期:"><el-input :value="stockInfo.listDate" disabled size="mini"></el-input></el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script lang="ts">
import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
import DictionConstUtil, { SGU_CACHE, objToArr } from '@/utils/diction-const-util';
import Invest from '@/common/dict/invest';
import { UUID } from '@/utils/tools';

@Component({
  name: 'StockInfo',
})
export default class StockInfo extends Vue {
  @Prop()
  stockMessageData: any;
  stockInfo: any = {};

  // 利率类型
  interestTypes = {};

  // 证券类别数据
  stockTypeData: any[] = []; // 证券类别数据
  stockTypes: any = {};

  async mounted() {
    this.interestTypes = DictionConstUtil.InterestType;
    // 获取证券类型下拉数据
    this.$set(this, 'stockTypeData', await SGU_CACHE('StockType', '/dict/stockType/list', []));
    this.stockTypes = DictionConstUtil.ListToPojo(this.stockTypeData);
  }

  @Watch('stockMessageData', { immediate: true, deep: true })
  getData() {
    this.stockInfo = JSON.parse(JSON.stringify(this.stockMessageData.returnData));
    this.stockInfo.interestType = this.interestTypes[this.stockInfo.interestType];
    this.stockInfo.stockType = this.stockTypes[this.stockInfo.stockType];
  }
}
</script>
<style lang="scss" scoped>
// @import '../style/measure';

.title {
  color: #575757;
  margin-right: 10px;
}
.el-input {
  display: inline-table;
  /deep/ .el-input-group__append {
    padding: 0 10px !important;
  }
}
.info-box {
  // height: 100%;
  // padding: 20px 10px;
  .el-divider {
    margin: 0;
    margin-top: 5px;
  }
  .form-row {
    margin-top: 3px;
    .el-form-item--small {
      margin: 0;
      & /deep/ .el-form-item__label {
        color: #575757;
      }
      & /deep/ .el-input__inner {
        height: 28px;
        line-height: 28px;
      }
    }
  }
}
.security-box {
  .form-row {
    .el-form-item--small {
      & /deep/ .el-input__inner {
        background: #fff !important;
        color: #575757 !important;
      }
    }
  }
}
</style>
